<template>
  <div>
    <el-dialog v-model="visible" :title="title" @close="close" :width="width">
      <el-divider />
      <div class="file-link-dialog">
        <el-dialog v-model="innerVisible" width="30%" center :show-close="false" top="20vh">
          <div style="text-align: center; margin-bottom: 50px; padding: 0 80px">
            <div><img style="width: 100px; height: 100px" src="../../assets/images/success.png" alt="" /></div>
            <div style="margin-top: 40px">
              此合同文件链接已复制，你可以粘贴发到客户微信上。 合同查看密码：<span style="color: #ff3333">{{ password }}</span>
            </div>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="innerVisible = false">知道了</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div :style="[{ height: `${height}` }]">
        <pdfPreview v-if="url" :pdfUrl="url" show-buttons />
      </div>
      <div class="share-box" @click="handleClick" v-if="shareShow">
        <el-popover
          placement="top-start"
          :page-scale="'page-fit'"
          trigger="hover"
          :width="180"
          content="点击分享合同可以复制出合同文件的链接发给客户"
        >
          <template #reference>
            <img class="share-img" src="../../assets/images/share.png" alt="" />
          </template>
        </el-popover>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { contract, share } from "@/apis/clientManager";
import { handelCopy } from "@/utils/index.js";

const visible = ref(false);
const innerVisible = ref(false);
const shareShow = ref(true);
const contractId = ref();
const password = ref();
const url = ref("http://static.shanhuxueyuan.com/test.pdf");
import pdfPreview from "@/components/pdfPreview/index.vue";

defineProps({
  //宽
  width: {
    type: String,
    default: "90%"
  },
  //高
  height: {
    type: String,
    default: "80vh"
  },
  //标题
  title: {
    type: String,
    default: "文件预览"
  }
});
// 打开
const open = async contractId => {
  const { data } = await contract(contractId);
  url.value = data.fileUrl || "";
  password.value = data.password || "";
  visible.value = true;
};
// 关闭
const close = () => {
  visible.value = false;
};
// 点击分享
const handleClick = async () => {
  const { data } = await share();
  innerVisible.value = true;
  const url = data + "?contractId=" + contractId.value;
  handelCopy(url);
};
// 只是查看
const openPdf = async fileUrl => {
  shareShow.value = false;
  url.value = fileUrl;
  visible.value = true;
};
defineExpose({ open, openPdf, visible, url, handleClick, contractId });
</script>
<style scoped lang="scss">
.share-img {
  width: 128px;
  height: 128px;
}

.share-box {
  position: absolute;
  bottom: 20px;
  right: -100px;
}

:deep(.el-dialog) {
  margin-top: 4vh !important;
  box-shadow: 0px 4px 25px 0px rgba(4, 19, 74, 0.3);
  border-radius: 10px 10px 10px 10px;
}

.file-link-dialog {
  :deep(.el-dialog) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 25px 0px rgba(4, 19, 74, 0.3);
    border-radius: 10px 10px 10px 10px;
  }
}
</style>
